<script setup>
import { ref, getCurrentInstance } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { request } from '@/common/http'
import { message } from 'ant-design-vue'

const { proxy } = getCurrentInstance()

const result = ref([])

const current = ref('')

const allSvreen = ref(false)

request({ url: '/getVideos' }).then((res) => {
    if (res.length) {
        current.value = res[0].bvid
        result.value = res
    }
}).catch((err) => {
    message.error(err)
})

window.addEventListener("keydown", (e) => {
    e.preventDefault()
    const index = result.value.findIndex(item => item.bvid == current.value)
    switch (e.key) {
        case 'ArrowDown': // 向下
            if (index == -1 || index == result.value.length - 1) {
                current.value = result.value[0].bvid
            } else {
                current.value = result.value[index + 1].bvid
            }
            break
        case 'ArrowUp': // 向上
            if (index == -1 || index == 0) {
                current.value = result.value[0].bvid
            } else {
                current.value = result.value[index - 1].bvid
            }
            break
        case 'ArrowRight': // 向右
            break
        case 'ArrowLeft': // 向左
            break
        case 'Enter': // 回车
            // 将iframe全屏
            allSvreen.value = !allSvreen.value
            break
        case 'Escape': // 退出
            break
        case 'Backspace': // 返回
            break
        default:
            break
    }
})

</script>

<template>
    <main class="container">
        <a-space direction="vertical" class="dir">
            <template v-for="(item) in result" :key="item.bvid">
                <div class="item" :class="{ current: item.bvid == current}">
                    <a-avatar src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
                    <a-button type="primary" size="large" @click.stop="current = item.bvid">{{ item.title }}</a-button>
                </div>
            </template>
        </a-space>
        <div class="player">
            <iframe
                v-if="current"
                :class="{ allSvreen }"
                ref="playerRef"
                :src="`//player.bilibili.com/player.html?isOutside=true&bvid=${current}&p=1&danmaku=0`"
                scrolling="no"
                border="0"
                frameborder="no"
                framespacing="0"
                allowfullscreen="true"
            ></iframe>
        </div>
        
    </main>
</template>

<style lang="less">
.container {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100%;
    .dir {
        .item {
            padding: 1vw;
            border-radius: 4px;
            border: 1px solid transparent;
            &.current {
                background-color: aqua;
                border-color: aqua;
            }
        }
    }
    .player {
        width: 2px;
        flex: 1 1 auto;
        padding: 8px;
        display: flex;
        background-color: rgba(23, 122, 209, 0.468);
        border-radius: 8px;
        iframe {
            flex: 1 1 auto;
            height: auto;
            &.allSvreen {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
            }
        }
    }
    
}
</style>
